<template>
	<view class="login l-whitespace">
		<!-- 使用非原生导航栏后需要在页面顶部占位 -->
		<view style="height:80px;"></view>
		<view class="login-title color1">登录</view>
		<view class="login-from">
			<view class="login-logo">
				<image src="../../../static/logo.png" mode="aspectFill"></image>
			</view>
			<view class="login-from-wrap">
				<van-cell-group>
					<van-field
						clearable
						type="number"
						placeholder="手机号码"
						:border="false"
						@change="cPhone"
					/>
					<van-field
						clearable
						type="password"
						placeholder="登录密码"
						:border="false"
						@change="cPassword"
					/>
				</van-cell-group>
			</view>
			<view class="login-btn">
				<van-button
					size="large"
					custom-class="login-btn-reset"
					:loading="loading"
					@click="onSubmit"
				>
					登录
				</van-button>
			</view>
			<view class="tag color2" @tap="goPage('/pages/user/login/resetPwd')">找回密码</view>
		</view>
		<view class="register-tag" @tap="goPage('/pages/user/login/register')">
			<view class="color4">还没有账号?</view>
			<view class="color2">注册</view>
		</view>
	</view>
</template>

<script>
import * as reg from '../../../common/utils/reg.js';
import { mapActions, mapGetters } from 'vuex';
export default {
	data() {
		return {
			loading: false,
			info: {
				phone: '',
				pwd: ''
			}
		};
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	onLoad() {
	},
	onShow () {
		try {
			uni.removeStorageSync('bht_note');
		} catch (e) {
		}
	},
	methods: {
		...mapActions([
			'setUserInfo'
		]),
		onSubmit () {
			if (this.loading) return
			const regSubmit = reg.regSubmit(this.info)
			if (regSubmit) {
				uni.showToast({
					title: regSubmit, 
					icon: 'none'
				});
				return
			}
			this.loading = true
			this.$http.login(this.info).then(res => {
				const data = res.data
				this.loading = false
				if (data.success) {
					uni.setStorage({
						key: 'STOREKEY_LOGIN',
						data: data.data.token,
						success: () => {
							this.getUserInfo()
						}
					})
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				})
			}).catch(err => {
				this.loading = false
			})
		},
		getUserInfo () {
			this.$http.getUserInfo().then(res => {
				const data = res.data
				if (data.success) {
					uni.showToast({
						title: '登录成功', 
						icon: 'none'
					});
					this.setUserInfo(data.data).then(e => {
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/index'
							});
						}, 200)
					})
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		},
		goPage(url) {
			uni.navigateTo({
				url: url
			});
		},
		cPhone(e) {
			this.info.phone = e.detail
		},
		cPassword(e) {
			this.info.pwd = e.detail
		},
		cCode (e) {
			this.info.code = e.detail
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../../common/user.scss';
.login {
	&-logo {
		position: absolute;
		top: -70upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 9;
		width: 120upx;
		height: 120upx;
		padding: 20upx;
		background-color: #ffffff;
		box-shadow: 0 10upx 20upx 0 rgba(0, 0, 0, 0.1);
		border-radius: 20upx;
	}
	&-from {
		position: relative;
		padding: 30upx;
		text-align: center;
		background-color: #ffffff;
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
		&-wrap{
			margin-top: 120upx;
		}
	}
	.tag {
		padding-left: 5upx;
		text-align: left;
		margin-top: 20upx;
	}
	.register-tag {
		display: flex;
		padding-left: 10upx;
		margin-top: 70upx;
		.color4,
		.color2 {
			font-size: 30upx;
		}
		.color2 {
			margin-left: 10upx;
			font-size: 600;
		}
	}
}
</style>
